<template>
  <div>
    <div class="member_box box mb10">
      <div class="avatar"><img :src="avatar" /></div>
      <div class="info box_flex_1" @click="toLogin">
        <div class="nickname">
        {{ member.nickname }}
        <img class="group_icon" v-if="member.group.icon !=''" :src="member.group.icon" />
        </div>
        <div class="signature">当前积分：{{ member.points }}</div>
      </div>
    </div>

    <section class="order_box mb10">
      <van-cell-group>
        <van-cell style="font-weight: bold;font-size: 16px;" title="商城订单" isLink>
          <router-link style="font-weight: 100;font-size: 14px;" to="/order/0" class="order_all">查看全部订单</router-link>
        </van-cell>
      </van-cell-group>

      <div class="order_status">
        <div class="order_status_icon" @click="$router.replace({ name: 'order', params: { active: 1 } })">
          <van-icon class="iconfont" class-prefix="icon" name="daifukuan" :info="statics.daifukuan > 0 ? statics.daifukuan : ''" />
          <span>待付款</span>
        </div>

        <div class="order_status_icon" @click="$router.replace({ name: 'order', params: { active: 2 } })">
          <van-icon class="iconfont" class-prefix="icon" name="daifahuo" :info="statics.daifahuo > 0 ? statics.daifahuo : ''" />
          <span>待发货</span>
        </div>

        <div class="order_status_icon" @click="$router.replace({ name: 'order', params: { active: 3 } })">
          <van-icon class="iconfont" class-prefix="icon" name="yifahuo" :info="statics.daishouhuo > 0 ? statics.daishouhuo : ''" />
          <span>待收货</span>
        </div>
        <div class="order_status_icon" @click="$router.replace({ name: 'order', params: { active: 4 } })">
          <van-icon class="iconfont" class-prefix="icon" name="daipingjia" :info="statics.daipingjia > 0 ? statics.daipingjia : ''" />
          <span>待评价</span>
        </div>

        <div class="order_status_icon br0" @click="$router.push({ path: '/service' })">
          <van-icon class="iconfont" class-prefix="icon" name="shouhou" :info="statics.daichuli > 0 ? statics.daichuli : ''" />
          <span>售后</span>
        </div>
      </div>
    </section>

    <div class="more_box">

      <van-cell-group class="mb10">
        <van-cell icon="location-o" title="我的地址" to="/address" isLink />
        <van-cell icon="points" title="我的积分" to="/points" isLink />
        <van-cell icon="point-gift-o" title="积分兑换" to="/pointsGoods" isLink >
          <span style="font-weight: 100;font-size: 13px;" class="order_all">{{'您有' + member.points + '积分可以兑换'}}</span>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell icon="service-o" title="服务中心" to="/help" isLink />
      </van-cell-group>

    </div>
    <div class="bottom_positon">木马牛提供技术支持v1.5</div>
    <app-nav></app-nav>
  </div>
</template>
<style lang="scss" scoped="scoped">
  @import "@/assets/scss/variable.scss";
.bottom_positon {
  position: absolute;
  bottom: 70px;
  width: 100%;
  color: #bbb;
  text-align: center;
  font-size: 12px;
}

.order_status {
  display: flex;
  .order_status_icon {
    flex: 1;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      border-right: 1px solid #ebedf0;
      height: 150%;
      transform: scale(0.5) translate3d(-50%, -50%, 0);
      transform-origin: 0 0;
    }
    &:last-child::after {
      border: 0;
    }

    .iconfont {
      position: relative;
      font-size: 20px;
    }
    span {
      font-size: 12px;
    }
  }

  // .order_status_icon {
  //   .iconfont {
  //     position: relative;
  //   }
  // }
}

/* 订单状态 */
.order_all {
  text-decoration: none;
  color: #aaa;
}

.order_status .order_status_icon {
  text-align: center;
}

.order_status .order_status_icon span {
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
}

.order_status .iconfont {
  font-size: 25px;
}

.order_box {
  background-color: white;
}

.order_box .order_status_icon {
  margin-top: 15px;
  margin-bottom: 15px;
}

.member_box {
  background: linear-gradient(135deg, $colorPrimary, $colorPrimaryDark);
}

.member_box {
  padding: 30px 20px;
}
.avatar {
  margin-right: 10px;
  img {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
  }
}

.info {
  color: white;
  height: 60px;
  display: table-cell;
  vertical-align: middle;
  .nickname {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    .group_icon{
      width: 20px;
      margin-left: 5px;
     }
  }
  .signature {
    font-size: 14px;
  }
}
</style>
<script>
import nav from './nav.vue';

import cookies from '../utils/cookies.js';
import avatar from '../assets/avatar_default.png';

export default {
  components: {
    appNav: nav
  },
  name: 'home',
  data() {
    return {
      statics: {},
      member: {
        nickname: '未登录',
        avatar: avatar,
        points: '0',
        group: {
          icon: ''
        }
      }
    };
  },
  computed: {
    avatar() {
      if (this.member.avatar) {
        return this.member.avatar;
      } else {
        return avatar;
      }
    }
  },
  created() {
    let uid = cookies.getCookie('token');
    if (uid) {
      this.loadData();
    }
  },
  methods: {
    toLogin() {
      let uid = cookies.getCookie('token');
      if (!uid) {
        this.$router.push({ path: '/login', query: { redirect: '/mine' } });
      }
    },
    loadData() {
      this.apiPost('/shop.member/index', {}).then(res => {
        this.member = res.data.member;
        this.statics = res.data.statics;
      });
    }
  }
};
</script>
